<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/12.0.0.0/iclient-plot-leaflet.min.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_operatePlottingLayer"></title>
</head>
<body  style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary" style=" position: absolute;top: 10px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;">
    <div class='panel-heading' id="panelheading">
        <h5 class='panel-title text-center' data-i18n="resources.title_operatePlottingLayer"></h5>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:5px;width: 340px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createLayer" onclick="createPlottingLayer()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteLayer" onclick="removePlottingLayer()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawMarker" onclick="plotSymbol()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelMarker" onclick="plottingDrawCancel()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 12px;left:30px;width: 240px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createChildLayer" onclick="createChildPlotLayer()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteChildLayer" onclick="removeChildPlotLayer()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:5px;width: 340px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_setPlottingLayerMinScale" onclick="setPlottingLayerMinScale()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:15px;width: 340px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_setPlottingLayerMaxScale" onclick="setPlottingLayerMaxScale()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:15px;width: 340px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_clearScale" onclick="clearScale()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:5px;width: 340px;">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_setSymScaleDefinition" onclick="setSymScaleDefinition()"/>
    </div>
    <div class='input-group' style=" margin-bottom: 10px;top:10px;left:5px;right:15px;width: 340px;">
        <div class='input-group' style=" margin-bottom: 10px;left:10px;width: 300px;">
            <span class='input-group-addon' data-i18n="resources.btn_plotSize"></span>
            <select class='form-control' id='plotSize'>
                <option value='0'>false</option>
                <option value='1' selected>true</option>
            </select>
        </div>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%">
</div>
<script type="text/javascript" include="bootstrap,widgets.alert,plottingPanel" src="../js/include-web.js"></script>
<script type="text/javascript"  include="leaflet,iclient-leaflet,iclient-leaflet-css,iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" include="PlotPanel,StylePanel,PlotMapPanel" src="../js/plottingPanel/PlottingPanel.Include.js"></script>
<script type="text/javascript">

    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china/rest/maps/China_4326";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map,plottingLayer,drawControl,childPlotLayer,visibleFlag;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [35,104],
        maxZoom: 18,
        zoom: 3
    });

    var baseLayer = L.supermap.tiledMapLayer(url).addTo(map);
    drawControl = L.supermap.plotting.drawControl();
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    var plotting = L.supermap.plotting.getControl(map, serverUrl);
    var plotMapManager = plotting.getPlotMapManager();

    function createPlottingLayer(){
        widgets.alert.clearAlert();

        var plottingLayerName = "图元层";
        plottingLayer = L.supermap.plotting.plottingLayer(plottingLayerName, serverUrl);
        plottingLayer.addTo(map);
        plotMapManager.setActivePlottingLayer(plottingLayer);
        var successMessage = "图层 " + plottingLayer.name + " 创建成功";
        widgets.alert.showAlert(successMessage,true);
    }

    function removePlottingLayer(){
        widgets.alert.clearAlert();
        if (plotMapManager.getPlottingLayers().length !== 0) {
            var tempPlottingLayer = plotMapManager.getActivePlottingLayer();
            map.removeLayer(tempPlottingLayer);
            var successMessage = "图层 " + tempPlottingLayer.name + " 删除成功";
            if(plotMapManager.getPlottingLayers().length > 0){
              plotMapManager.setActivePlottingLayer(plotMapManager.getPlottingLayers()[plotMapManager.getPlottingLayers().length-1]);
            }
            widgets.alert.showAlert(successMessage,true);
        } else {
            widgets.alert.showAlert("当前地图无标绘图层",false);
        }
    }

    function createChildPlotLayer() {
        widgets.alert.clearAlert();
        if(plotMapManager.getActivePlottingLayer() != null){
            var plottingLayerName = "子图层";
            var plottingLayerCaption = plottingLayerName;
            childPlotLayer = L.supermap.plotting.childPlotLayer(plottingLayerName,plottingLayerCaption);
            plottingLayer.addChildPlotLayer(childPlotLayer);
            plotMapManager.setActiveChildPlotLayer(childPlotLayer);

            var successMessage = "子图层 " + childPlotLayer.name + " 创建成功";
            widgets.alert.showAlert(successMessage,true);
        }else{
            widgets.alert.showAlert("请先添加标绘图层！",true);
        }
    }

    function removeChildPlotLayer(){
        widgets.alert.clearAlert();
        var childPlotLayer = plotMapManager.getActiveChildPlotLayer();
        if (childPlotLayer != null && childPlotLayer.getParent() != null) {
          childPlotLayer.getParent().removeChildPlotLayer(childPlotLayer);
          if(childPlotLayer.getParent().getChildPlotLayers().length > 0){
              plotMapManager.setActiveChildPlotLayer(childPlotLayer.getParent().getChildPlotLayers()[childPlotLayer.getParent().getChildPlotLayers().length-1]);
          }

          var successMessage = "子图层 " + childPlotLayer.name + " 删除成功";
          widgets.alert.showAlert(successMessage,true);
        } else {
            widgets.alert.showAlert("当前地图无标绘图层或子图层",false);
        }
    }

    function setPlottingLayerMinScale() {
      widgets.alert.clearAlert();
      if (plotMapManager.getActivePlottingLayer() != null) {
          plotMapManager.getActivePlottingLayer().setMinVisibleScale(baseLayer.getScale());
      } else {
          widgets.alert.showAlert("当前地图无标绘图层",false);
      }
        //plotMapManager.getActivePlottingLayer().setMinVisibleScale(baseLayer.getScale());
    }

    function setPlottingLayerMaxScale() {
      widgets.alert.clearAlert();
      if (plotMapManager.getActivePlottingLayer() != null) {
          plotMapManager.getActivePlottingLayer().setMaxVisibleScale(baseLayer.getScale());
      } else {
          widgets.alert.showAlert("当前地图无标绘图层",false);
      }
        //plotMapManager.getActivePlottingLayer().setMaxVisibleScale(baseLayer.getScale());
    }

    function clearScale() {
      widgets.alert.clearAlert();
      if (plotMapManager.getActivePlottingLayer() != null) {
          plotMapManager.getActivePlottingLayer().clearVisibleScale();
      } else {
          widgets.alert.showAlert("当前地图无标绘图层",false);
      }
        //plotMapManager.getActivePlottingLayer().clearVisibleScale();
    }

    function setSymScaleDefinition() {
        if(document.getElementById("plotSize").selectedIndex === 0) {
            plotMapManager.getActivePlottingLayer().setSymScaleDefinition(baseLayer.getScale(),false);
        }else{
            plotMapManager.getActivePlottingLayer().setSymScaleDefinition(baseLayer.getScale(),true);
        }
    }

    function plotSymbol(){
        widgets.alert.clearAlert();
        if(plotMapManager.activePlottingLayer && drawControl.drawingLayer != null){
            drawControl.handler.libID = 421;
            drawControl.handler.code = 10100;
            drawControl.handler.serverUrl = serverUrl;
            drawControl.handler.enable();
        }else{
            widgets.alert.showAlert("请先添加标绘图层！",true);
        }
    }

    function plottingDrawCancel(){
        widgets.alert.clearAlert();
        drawControl.handler.disable();
    }

    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
            $('#popupWin').toggle();
        });
    });
</script>
</body>
</html>
